<template>
  <div class="home">
    <div class="hero">
      <h1>欢迎来到我的博客</h1>
      <p>分享技术，记录生活</p>
    </div>
    
    <div class="articles">
      <h2>最新文章</h2>
      <div class="article-list">
        <div class="article-card" v-for="article in articles" :key="article.id">
          <div class="article-cover" v-if="article.coverImage">
            <img :src="article.coverImage" :alt="article.title" />
          </div>
          <div class="article-content">
            <h3>
              <router-link :to="`/article/${article.id}`">
                {{ article.title }}
              </router-link>
            </h3>
            <p class="article-summary">{{ article.summary }}</p>
            <div class="article-meta">
              <span class="author">{{ article.author }}</span>
              <span class="date">{{ formatDate(article.createdAt) }}</span>
              <span class="views">{{ article.viewCount }} 阅读</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Article {
  id: number
  title: string
  summary: string
  coverImage?: string
  author: string
  createdAt: string
  viewCount: number
}

const articles = ref<Article[]>([
  {
    id: 1,
    title: 'Vue 3 组合式API入门指南',
    summary: '本文介绍了Vue 3的组合式API的基本用法和最佳实践...',
    author: '张三',
    createdAt: '2024-01-15T10:30:00Z',
    viewCount: 1234
  },
  {
    id: 2,
    title: 'Spring Boot 微服务架构设计',
    summary: '探讨如何使用Spring Boot构建微服务架构，包括服务发现、配置管理等...',
    author: '李四',
    createdAt: '2024-01-14T15:20:00Z',
    viewCount: 856
  }
])

const formatDate = (dateStr: string) => {
  return new Date(dateStr).toLocaleDateString('zh-CN')
}
</script>

<style scoped>
.hero {
  text-align: center;
  padding: 60px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  margin-bottom: 40px;
  border-radius: 8px;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.hero p {
  font-size: 1.2rem;
  opacity: 0.9;
}

.articles h2 {
  margin-bottom: 20px;
  color: #333;
}

.article-list {
  display: grid;
  gap: 20px;
}

.article-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s;
}

.article-card:hover {
  transform: translateY(-2px);
}

.article-cover img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.article-content {
  padding: 20px;
}

.article-content h3 {
  margin-bottom: 10px;
}

.article-content h3 a {
  color: #333;
  text-decoration: none;
}

.article-content h3 a:hover {
  color: #409eff;
}

.article-summary {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.article-meta {
  display: flex;
  gap: 15px;
  color: #999;
  font-size: 0.9rem;
}
</style>